// @import "../bower-libs/bootstrap/less/bootstrap.less";
// @import (less) "../bower-libs/ace/lib/ace/css/editor.css";
// @import (less) "../bower-libs/ace/lib/ace/ext/searchbox.css";
// @import (less) "../bower-libs/ace/lib/ace/theme/textmate.css";

.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}
// Opacity
.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

@gray-darker:            lighten(#000, 13.5%); // #222
@gray-dark:              lighten(#000, 20%);   // #333
@gray:                   lighten(#000, 33.5%); // #555
@gray-light:             lighten(#000, 60%);   // #999
@gray-lighter:           lighten(#000, 93.5%); // #eee
@input-color:                    @gray;
@padding-small-horizontal:       10px;
@line-height-base:        1.428571429;
@line-height-large:              1.33;
@line-height-small:              1.5;
@padding-small-vertical:         5px;
@padding-base-horizontal:        12px;
@font-size-base:          14px;
@font-size-large:         ceil(@font-size-base * 1.25); // ~18px
@font-size-small:         ceil(@font-size-base * 0.85); // ~12px

@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@input-border:                   #ccc;

@text-color: #000;
@kbd-color: #333;
@kbd-bg-color: #FFF;
@kbd-border-color: fade(@text-color, 25%);
@blockquote-border-color: #eee;
@blockquote-bg: #f8f8f8;
@title-base-size: 14px;
@code-color: @text-color;
@code-bg: fade(@text-color, 4%);
@pre-bg: @blockquote-bg;
@pre-border-color: @blockquote-border-color;


/* Colors */
@logo-yellow: #FFD900;
@logo-blue: #53a9ff;
@logo-orange: #ff7606;
@logo-green: #a5cc0a;
@primary: #0080FF;
@secondary: @primary;
@tertiary: @primary;
@primary-desaturated: desaturate(@primary, 70%);
@secondary-desaturated: desaturate(@secondary, 80%);
@transparent: fade(#000, 0%);

// Navbar
@primary-bg: lighten(@primary-desaturated, 42%);
@primary-border-color: fade(@primary, 10%);

// Preview and menus
@secondary-bg: lighten(@secondary-desaturated, 45%);
@secondary-bg-light: lighten(@secondary-desaturated, 47%);
@secondary-bg-lighter: #fff;
@secondary-color: @primary-desaturated;
@secondary-color-dark: darken(@secondary-color, 12.5%);
@secondary-color-darker: darken(@secondary-color, 25%);
@secondary-color-darkest: darken(@secondary-color, 37.5%);
@secondary-border-color: lighten(@primary-desaturated, 40%);
@secondary-border-color-light: lighten(@primary-desaturated, 44%);
@secondary-border-color-lighter: lighten(@primary-desaturated, 46%);

// Editor
@tertiary-bg: #fff;
@tertiary-color-light: fade(@tertiary-color, 60%);
@tertiary-color: darken(@secondary-desaturated, 7.5%);
@tertiary-color-dark: darken(@tertiary-color, 15%);
@tertiary-color-darker: darken(@tertiary-color, 30%);

@error-border: #FF6161;
@folder-color: @secondary-color-darker;

/* Sizes */
@file-title-width: 280px;
@menu-panel-width: 280px;
@document-panel-width: 340px;
@jgrowl-width: 260px;
@resizer-size: 35px;

/*****************************
 * Editor
 *****************************/

.ace_editor {
	color: @tertiary-color-dark;
}

.ace-tm {
	background-color: @tertiary-bg;

	.ace_text-input {
		box-sizing: initial;
	}

	.ace_marker-layer .ace_active-line {
	    background-color: fade(@primary-desaturated, 5%);
	}

	.ace_cursor {
	    color: darken(@primary-desaturated, 30%);
	}

	.ace_print-margin {
		background-color: fade(@primary-desaturated, 5%);
	}

	.ace_markup.ace_heading {
		color: @tertiary-color-darker;
		font-weight: bold;
	}

	.ace_markup.ace_list {
		color: @tertiary-color;
	}

	.ace_constant.ace_language {
	    color: @tertiary-color-light;
		font-weight: normal;
	}

	.ace_meta.ace_tag {
		color: @tertiary-color-dark;
		font-style: italic;
		font-weight: bold;
		background-color: @code-bg;
	}

	.ace_keyword.ace_operator {
	    color: @tertiary-color-dark;
		background-color: transparent;
	}

	.ace_storage, .ace_keyword {
		color: @tertiary-color-dark;
		background-color: @code-bg;
		font-weight: bold;
	}

	.ace_entity.ace_name.ace_function {
		color: @tertiary-color-darker;
		font-weight: bold;
	}

	.ace_string {
		color: @tertiary-color-dark;
		font-style: italic;
		background-color: @code-bg;
	}

	.ace_invalid {
	    color: inherit;
        background: inherit;
	}

	.ace_strong {
		color: @tertiary-color-dark;
		font-weight: bold;
	}

	.ace_emphasis {
		color: @tertiary-color-darker;
		font-style: italic;
	}

	.ace_blockquote {
		color: @tertiary-color;
	}

	.ace_code {
		color: @tertiary-color-darker;
		background-color: @code-bg;
	}

	.ace_code_block {
		color: @tertiary-color-darker;
	}

	.ace_link {
	    color: @tertiary-color;
		background-color: @code-bg;
	}

	.ace_description {
		color: @tertiary-color;
	}

	.ace_constant {
	    color: @tertiary-color-dark;
	}

	.ace_comment {
	    color: @tertiary-color-light;
		font-style: italic;
	}

	.ace_marker-layer .misspelled {
	    position: absolute;
	    z-index: -2;
	    border-bottom: 1px dotted red;
	    margin-bottom: -1px;
	}
}

.ace_search {
	background-color: @secondary-bg-light;
	border: 1px solid @secondary-border-color-light;
	border-top: 0;
	padding: 10px 15px 5px;
	// font-family: @font-family-base;
	min-width: 318px;
	.ace_search_form, .ace_replace_form {
        border-color: @input-border;
	    margin-bottom: 10px;
	}
	.ace_search_field {
	    width: 185px;
	}
	.ace_search_field, .ace_searchbtn, .ace_replacebtn {
        height: @input-height-small;
        padding: 0 @padding-base-horizontal;
        font-size: @font-size-base;
        line-height: @line-height-base;
        color: @input-color;
        vertical-align: middle;
        background-color: @secondary-bg-lighter;
        border-color: @input-border;
        .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
	}
	.ace_searchbtn {
        background-image: none;
        font-family: "fontello";
        width: auto;
        font-size: 16px;
        &.next:before {
            content: '\e880';
        }
        &.prev:before {
            content: '\e87f';
        }
    }
	.ace_replacebtn {
        padding: 0 4px;
    }
    .ace_searchbtn_close {
        background: transparent;
        margin: 0;
        font-size: (@font-size-base * 1.5);
        // font-weight: @close-font-weight;
        // text-shadow: @close-text-shadow;
        .opacity(.3);
        &:before {
            content: '\d7';
        }
        &:hover,
        &:focus {
            // color: @close-color;
            text-decoration: none;
            cursor: pointer;
            .opacity(.5);
            background: transparent;
        }
    }
}
